<script setup lang="ts">
import earth from '@/assets/images/international/design/earth.png';
</script>

<template>
  <div class="international-global">
    <div class="container">
      <div class="globalBody">
        <div class="title">
          <span class="left">DIA/IPLC服务区域</span>
          <span class="right">遍布全球</span>
        </div>
        <div class="comment">
          云桥通在亚洲、欧洲、北美洲等全球各核心城市范围内建立了广泛的网络覆盖，拥有多个数据中心和网络出口节点。更容易地为客户提供全球性的互联网接入服务，满足不同地区和国家的需求
        </div>
        <img v-lazy="earth" alt="" />
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.international-global {
  .globalBody {
    width: 100%;
    height: 870px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    .title {
      margin-bottom: 50px;
      text-align: center;
      font-size: 36px;
      font-weight: normal;
      font-stretch: normal;
      line-height: 1.4;
      letter-spacing: 4px;
      font-family: 'SourceHanSansCN-Normal';
      .left {
        color: #484848;
      }
      .right {
        font-weight: 700;
        /* 定义渐变色背景 */
        background: linear-gradient(to right, #5b9bc7, #3e5898);
        /* 设置背景剪切区域为文本 */
        -webkit-background-clip: text;
        /* 设置文本填充颜色为透明，只显示渐变色背景 */
        -webkit-text-fill-color: transparent;
      }
    }
    .comment {
      width: 1012px;
      font-family: 'SourceHanSansCN-Light';
      font-size: 20px;
      font-weight: normal;
      font-stretch: normal;
      line-height: 47px;
      letter-spacing: 1px;
      color: #1e1f1f;
      text-align: center;
    }

    img {
      margin-top: -20px;
    }
  }
}

// xl(1200px)至xxl(1600px)
@media screen and (min-width: 1201px) and (max-width: 1600px) {
  .container {
    width: 85%;
  }
}

// lg(992px)至xl(1200px)
@media screen and (min-width: 993px) and (max-width: 1200px) {
  .container {
    width: 95%;

    .globalBody {
      .comment {
        width: 100%;
      }
    }
  }
}

// md(768px)至lg(992px)
// sm(576px)至md(768px)
@media screen and (min-width: 577px) and (max-width: 992px) {
  .container {
    width: 100%;
    padding: 0 20px;

    .globalBody {
      .comment {
        width: 100%;
      }
    }
  }
}
// 少于xs(576px)

@media screen and (max-width: 576px) {
  .container {
    width: 100%;
    padding: 0 20px;

    .globalBody {
      .title {
        white-space: nowrap;
        display: flex;
        flex-direction: column;
        align-items: center;
      }
      .comment {
        width: 100%;
        font-size: 18px;
      }

      img {
        width: 100%;
      }
    }
  }
}
</style>
